$(function() {
    // 登录
    var loginArr = JSON.parse($.cookie("logoInfo") || '[]');
    if (loginArr.length == 0) {
        $(".login").html(`
        <span><a href="./register.html">注册</a></span>
        <span><a href="./login.html">登录</a></span>
        <span class="bor">
            <a class="qqq" href="javascript:void(0)">
                <img src="./images/index/cart.png" alt="">
            </a>
        </span>`)
    } else {
        $(".login").html(`
        <span>你好,${JSON.parse($.cookie('logoInfo'))[0].utel}<a href="javascript:void(0)" class="off">[退出]</a></span>
        <span class="bor">
            <a href="./cart.html">
                <img src="./images/index/cart.png" alt="">
            </a>
        </span>`)
    }


    //登录
    // if ($.cookie("logoInfo") == null || JSON.parse($.cookie("logoInfo")) == null) {
    //     $(".login").html(`
    //     <span><a href="./register.html">注册</a></span>
    //     <span><a href="./login.html">登录</a></span>
    //     <span class="bor">
    //         <a href="./cart.html">
    //             <img src="./images/index/cart.png" alt="">
    //         </a>
    //     </span>`)
    // } else {
    //     $(".login").html(`
    //     <span>你好,${JSON.parse($.cookie('logoInfo'))[0].utel}<a href="javascript:void(0)" class="off">[退出]</a></span>
    //     <span class="bor">
    //         <a href="./cart.html">
    //             <img src="./images/index/cart.png" alt="">
    //         </a>
    //     </span>`)
    // }

    //退出登录
    $(".login").on("click", ".off", function() {
        $.ajax({
            url: "./api/quit",
            type: "get"
        }).then(function(res) {
            layer.msg(res.msg)
                // $.cookie("logoInfo", null);
            $(window).attr('location', './login.html');
        })
    })

    //页面动态渲染
    $.ajax({
        url: "./api/carts",
        type: "get",
        data: {
            uid: JSON.parse($.cookie("logoInfo"))[0].uid
        }
    }).then(function(res) {
        if (res.status == -1) {
            $(".empty").css("display", "block");
            $(".jiesuan").css("display", "none");
        } else {
            $(".empty").css("display", "none");
            $(".jiesuan").css("display", "block");
        }
        render(res.data);
    })

    function render(arr) {
        var html = "";
        arr.forEach(el => {
            html += `
                <ul class="column-list column-list-body">
                    <li class="column one">
                        <div class="select-wrap">
                            <label class="el-checkbox">
                                <span class="el-checkbox__input">
                                    <input type="checkbox" class="el-checkbox__original">
                                </span>
                            </label>
                        </div>
                    </li>

                    <li class="column two">
                        <div class="product-wrap">
                            <div class="logo" style="background-image: url('${el.p_img}');"></div>
                            <div class="product-info">
                                <div class="name">${el.p_name}</div>
                                <ul class="sku-list">
                                    <li class="sku">${el.p_color},${el.p_size}</li>
                                </ul>
                            </div>
                        </div>
                    </li>

                    <li class="column three">
                        <span class="price-unit">¥</span>
                        <span class="danJia">${el.p_price}</span>
                    </li>

                    <li class="column four">
                        <div data-cid=${el.c_id} class="el-input-number">
                            <span class="el-input-number__decrease is-disabled less">—</span>

                            <span class="el-input-number__increase plus">＋</span>

                            <div class="el-input">
                                <input type="text" class="el-input__inner" value="${el.p_num}">
                            </div>
                        </div>
                    </li>

                    <li class="column five">
                        <span class="active4">
                            <span class="price-unit1">¥</span>
                        <span class="xj">${Number(el.p_total).toFixed(2)}</span>
                        </span>
                    </li>

                    <li class="column sex">
                        <button data-cid=${el.c_id} class="btn-link">删除</button> <button class="btn-store">加入收藏</button>
                    </li>
                </ul>`;
            $(".add").html(html)
            cart()
        });
    }


    //首页列表栏切换
    $(".top li").eq(0).on("click", function() {
        $(window).attr('location', './index.html');
    }).siblings().on("click", function() {
        $(window).attr('location', './list.html');
    })

    //固定导航栏
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > $(".head").height()) {
            $(".top").css({
                position: "fixed",
                top: 0,
                left: 0,
                zIndex: 9999
            })
            $(".category-list-wrap").css("margin-top", $(".top").height())
        } else {
            $(".top").css({
                position: "static",
            })
            $(".category-list-wrap").css("margin-top", 0)
        }
    })

    //返回顶部
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > 900) {
            $(".toTop").css("display", "block");
        } else {
            $(".toTop").css("display", "none");
        }
    })
    $(".toTop").on("click", function() {
        $('html,body').animate({ scrollTop: 0 }, 500);
    })


    //去添加商品
    $(".empty button").on("click", function() {
        $(window).attr('location', './list.html');
    })


    //全选与反选
    $(".select_all").on("click", function() {
        if (this.checked) {
            $(".column-list-body :checkbox").prop("checked", true);
            $(".select_all:checkbox").prop("checked", true);
        } else {
            $(".column-list-body :checkbox").prop("checked", false);
            $(".select_all:checkbox").prop("checked", false);
        }
        allPrice();
        checkNum();
    })

    $(".jiesuan ").on("click", ".el-checkbox__original", function() {
        if ($(".jiesuan .el-checkbox__original:checked").length == $(".jiesuan .el-checkbox__original").length) {
            $(".select_all:checkbox").prop("checked", true);
        } else {
            $(".select_all:checkbox").prop("checked", false);
        }
        allPrice();
        checkNum();
    })

    //购买数量
    //减
    $(".jiesuan").on("click", ".less", function() {
        var xj = $(this).parents(".column-list").children(".five").children(".active4").children(".xj");
        var danJia = $(this).parents(".column-list").children(".three").children(".danJia");
        if ($(this).parent().children(2).children().prop("value") > 1) {
            $(this).parent().children(2).children().prop("value", $(this).parent().children(2).children().prop("value") * 1 - 1);
        } else {
            return
        }

        var params = {
            cid: $(this).parent(".el-input-number").data("cid"),
            pnum: $(this).parent().children(2).children().prop("value")
        }
        $.ajax({
            url: "./api/modify",
            type: "post",
            data: params
        }).then(function(res) {
            layer.msg(res.msg)
        })

        xj.html(`${$(this).parent().children(2).children().prop("value") * danJia.html()}.00`);
        allPrice();
        checkNum();
        cart()
    })

    //光标离开事件
    $(".jiesuan").on("blur", ".el-input__inner", function() {
        var xj = $(this).parents(".column-list").children(".five").children(".active4").children(".xj");
        var danJia = $(this).parents(".column-list").children(".three").children(".danJia");
        var val = $(this).prop("value")
        var params = {
            cid: $(this).parents(".el-input-number").data("cid"),
            pnum: val
        }
        $.ajax({
            url: "./api/modify",
            type: "post",
            data: params
        }).then(function(res) {
            // layer.msg(res.msg)
        })
        xj.html(`${val * danJia.html()}.00`)
        allPrice();
        checkNum();
        cart()
    })

    //加
    $(".jiesuan").on("click", ".plus", function() {
        var xj = $(this).parents(".column-list").children(".five").children(".active4").children(".xj");
        var danJia = $(this).parents(".column-list").children(".three").children(".danJia");
        $(this).parent().children(2).children().prop("value", $(this).parent().children(2).children().prop("value") * 1 + 1);

        //修改数据库
        var params = {
            cid: $(this).parent(".el-input-number").data("cid"),
            pnum: $(this).parent().children(2).children().prop("value")
        }
        $.ajax({
            url: "./api/modify",
            type: "post",
            data: params
        }).then(function(res) {
            layer.msg(res.msg)
        })

        //小计
        xj.html(`${$(this).parent().children(2).children().prop("value") * danJia.html()}.00`)
        allPrice();
        checkNum();
        cart()
    })

    function checkNum() {
        var num = 0;
        $(".jiesuan .el-checkbox__original").each(function() {
            if (this.checked) {
                var b = $(this).parents(".column-list").find(".el-input__inner").prop("value");
                num += Number(b);
            }
        })
        $(".zs").html(num);
    }

    function cart() {
        var gy = 0
        $(".jiesuan .el-input__inner").each(function() {
            var c = $(this).prop("value");
            gy += Number(c)
        })
        $(".gy").html(gy)
    }

    function allPrice() {
        var sum = 0;
        $(".jiesuan .el-checkbox__original").each(function() {
            if (this.checked) {
                var a = $(this).parents(".column-list").children(".five").children(".active4").children(".xj").html();
                sum += Number(a);
            }
        })
        $(".zj").html(sum.toFixed(2));
    }


    // 删除
    $(".jiesuan").on("click", ".btn-link", function() {
        var self = this;
        layer.confirm("你确定要删除吗?", {
            icon: 2,
            btn: ["确定", "取消"]
        }, function(index) {
            $.ajax({
                url: "./api/delete",
                type: "post",
                data: {
                    cid: $(self).data("cid")
                }
            }).then(function(res) {
                // layer.load();
                // setTimeout(function() {
                //     layer.closeAll('loading');
                // }, 500);
                layer.msg(res.msg);
                $(self).parents(".column-list-body").remove();

                $.ajax({
                    url: "./api/carts",
                    type: "get",
                    data: {
                        uid: JSON.parse($.cookie("logoInfo"))[0].uid
                    }
                }).then(function(res) {
                    if (res.status == -1) {
                        $(".empty").css("display", "block");
                        $(".jiesuan").css("display", "none");
                    } else {
                        $(".empty").css("display", "none");
                        $(".jiesuan").css("display", "block");
                    }
                    render(res.data);
                    cart()
                })
            })
        })
    })
})